@use "element_plus/light/css-vars.scss" as *;
@use "light.scss" as *;
@use "element-plus/theme-chalk/dark/css-vars.css" as *;
@use "element_plus/dark/css-vars.scss" as *;
@use "dark.scss" as *;

:root:root {
  //颜色
  --color-primary: #409eff;
  --color-success: #67c23a;
  --color-warning: #e6a23c;
  --color-danger: #f56c6c;

  //文字
  --font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;

  --font-color: #303133;
  --font-color-secondary: #606266;
  --font-color-placeholder: #909399;
  --font-color-disabled: #c0c4cc;

  --font-size: 14px;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;

  --font-weight: 500;
  --font-weight-thin: 400;
  --font-weight-bold: bold;

  //边框
  --border-color: #e4e7ed;
  --border-color-light: #e4e7ed;
  --border-color-dark: #d4d7de;

  //圆角
  --border-radius: 8px;
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-lg: 16px;
  --border-radius-max: 999px;

  //背景
  --background-color: #f0f2f5;
  --background-color-light: #ffffff;
  --background-color-dark: #ebedf0;
  --background-color-opacity: rgba(255, 255, 255, 0.8);
  --background-color-opacity-light: rgba(255, 255, 255, 0.9);
  --background-color-opacity-dark: rgba(255, 255, 255, 0.8);

  //内边距
  --padding: 16px;
  --padding-sm: 8px;
  --padding-lg: 32px;

  //外边距
  --margin: 16px;
  --margin-sm: 8px;
  --margin-lg: 32px;

  //阴影
  --box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);
  --box-shadow-light: 0px 0px 16px rgba(0, 0, 0, 0.08);
  --box-shadow-dark: 0px 0px 16px rgba(0, 0, 0, 0.16);

  //动画
  --animation-duration: 0.3s;
  --animation-duration-fast: 0.2s;

  //组件大小
  --component-size: 32px;
  --component-size-sm: 24px;
  --component-size-lg: 40px;
}

html {
  margin: 0px;
  padding: 0px;
}
body {
  margin: 0px;
  padding: 0px;
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: 150%;
  color: var(--font-color);
  background-color: var(--background-color-light);
}
a {
  color: var(--color-primary);
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: var(--font-family);
  margin: 0px;
  padding: 0px;
  line-height: 150%;
}
.text-tip {
  color: var(--font-color-secondary);
  font-size: var(--font-size-sm);
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
